<template>
  <div>
    <div style="padding: 0 0 0 20px">
      <el-input
        style="width: 650px"
        suffix-icon="el-icon-position"
        placeholder="请输入问题"
        v-model="userName"
      ></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="handleChat"
        >提问</el-button
      >
      <el-button style="margin-left: 5px" type="warning" @click="reset"
        >重置</el-button
      >
      <span>
        <Header />
      </span>
      <el-input
        type="textarea"
        style="width: 1000px"
        :autosize="{ minRows: 20, maxRows: 50 }"
        placeholder=""
        v-model="policeId"
      >
      </el-input>
    </div>
  </div>
</template>


<script>
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";
import { HomeChat } from "@/api/api";

export default {
  //这是 ES6 的模块导出语法，表示这个对象是整个模块（通常是一个 .vue 文件）的默认导出。在 Vue.js 中，这通常是一个 Vue 组件的定义
  name: "User", //这是 Vue 组件的一个选项，用于在该组件内注册其他子组件。这样，你就可以在 HomeView 组件的模板中直接使用这些子组件了。
  components: {
    Aside, //引入子组件，可以在 HomeView 组件的模板中使用 <Aside /> 标签了
    Header, //可以在 HomeView 组件的模板中使用 <Header /> 标签了
  },
  data() {
    return {
      userName: "",
      policeId: "",
    }
  },
  created() {
    //请求分页查询数据
    this.load();
  },
  methods: {
    async handleChat() {
      this.policeId = "";
      const res = await HomeChat(this.userName);
      this.policeId = res.data;
    },
    reset() {
      this.userName = "";
      this.policeId = "";
    },
  },
};
</script>